.yik-message-top-center {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.yik-message-bottom-center {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.yik-message-top-right {
  top: 20px;
  right: 20px;
}
.yik-message-top-left {
  top: 20px;
  left: 20px;
}
.yik-message-bottom-right {
  bottom: 20px;
  right: 20px;
}
.yik-message-bottom-left {
  bottom: 20px;
  left: 20px;
}
.yik-message-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.yik-message-center-left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.yik-message-center-right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
#yik-message-wrapper {
  position: fixed;
  z-index: 9999;
  /*************YikMessage***************/
}
#yik-message-wrapper .yik-message {
  padding: 8px 50px 8px 15px;
  border-radius: 3px;
  margin-bottom: 15px;
  font-size: 14px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  position: relative;
}
#yik-message-wrapper .yik-message .yik-message-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  width: 15px;
  height: 15px;
  animation-name: yik-message-close_smooth;
  animation-duration: 0.5s;
  /* zoom 开启缩放动画 */
}
@keyframes yik-message-close_smooth {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-50%);
  }
}
#yik-message-wrapper .yik-message_success {
  background-color: #4caf50;
  border-color: #4caf50;
  color: #fff;
  box-shadow: 1px 1px 15px rgba(76, 175, 79, 0.5);
}
#yik-message-wrapper .yik-message_success::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/message/success.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 8px;
}
#yik-message-wrapper .yik-message_info {
  background-color: #999;
  border-color: #999;
  color: #fff;
  box-shadow: 1px 1px 15px #999999;
}
#yik-message-wrapper .yik-message_info::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/message/info.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 8px;
}
#yik-message-wrapper .yik-message_warn {
  background-color: #ffae42;
  border-color: #ffae42;
  color: #fff;
  box-shadow: 1px 1px 15px #ffae42;
}
#yik-message-wrapper .yik-message_warn::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/message/warn.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 8px;
}
#yik-message-wrapper .yik-message_error {
  background-color: #de636f;
  border-color: #de636f;
  color: #fff;
  box-shadow: 1px 1px 15px #de636f;
}
#yik-message-wrapper .yik-message_error::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  background: url("../img/message/error.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 8px;
}
#yik-message-wrapper .yik-message-close_smooth {
  animation-name: yik-message-close_smooth;
  animation-duration: 0.5s;
  /* zoom 开启缩放动画 */
}
@keyframes yik-message-close_smooth {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(-50%);
  }
}
#yik-message-wrapper .yik-message_zoom {
  animation-name: yik-message_zoom;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  /* zoom 开启缩放动画 */
}
@keyframes yik-message_zoom {
  0% {
    transform: scale(0.1, 0.1);
  }
}
#yik-message-wrapper .yik-message_close-zoom {
  animation-name: yik-message_close-zoom;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}
@keyframes yik-message_close-zoom {
  100% {
    transform: scale(0.1, 0.1);
  }
}
#yik-message-wrapper .yik-message_slide {
  animation-name: yik-message_slide;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  /* zoom 开启缩放动画 */
}
@keyframes yik-message_slide {
  0% {
    opacity: 0;
    transform: translateX(100%) translateY(100%);
  }
}
#yik-message-wrapper .yik-message_close-slide {
  animation-name: yik-message_close-slide;
  animation-duration: 0.5s;
  animation-timing-function: ease;
}
@keyframes yik-message_close-slide {
  100% {
    opacity: 0;
    transform: translateX(100%) translateY(-100%);
  }
}
